<template>
  <a-modal
    title="选择审批人员"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    width="600px"
  >
    <div style="width: 100%; height: 500px">
      <a-form-model>
        <a-form-model-item :required="true" label="专业负责人" :label-col="{ span: 9 }" :wrapper-col="{ span: 13 }">
          <a-select
            mode="multiple"
            show-search
            :value="flow.disciplineLeader?flow.disciplineLeader.split(','):flow.disciplineLeader"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="fetchUserList"
            @change="
              (value) =>
                selectUserList(value, 'flow', 1, [
                  { from: 'realname', to: 'disciplineLeader' },
                  { from: 'username', to: 'disciplineLeaderId' },
                ])
            "
          >
            <a-select-option v-for="d in personList" :key="d.username">
              {{ d.realname }}({{ d.username }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :required="true"
          label="相关专业负责人及部门主管"
          :label-col="{ span: 9 }" :wrapper-col="{ span: 13 }">
          <a-select
            placeholder="受影响的专业负责人和相关部门主管"
            mode="multiple"
            show-search
            :value="flow.disciplineLeaderSupervisor && flow.disciplineLeaderSupervisor!=''?flow.disciplineLeaderSupervisor.split(','):[]"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="fetchUserList"
            @change="
              (value) =>
                selectUserList(value, 'flow', 1, [
                  { from: 'realname', to: 'disciplineLeaderSupervisor' },
                  { from: 'username', to: 'disciplineLeaderSupervisorId' },
                ])
            "
          >
            <a-select-option v-for="d in personList" :key="d.username">
              {{ d.realname }}({{ d.username }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="flow.needBudget == '1'"
          :required="true"
          label="造价部门专员"
          :label-col="{ span: 9 }" :wrapper-col="{ span: 13 }">
          <a-select
            mode="multiple"
            show-search
            :value="flow.costDepartment?flow.costDepartment.split(','):flow.costDepartment"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="fetchUserList"
            @change="
              (value) =>
                selectUserList(value, 'flow', 1, [
                  { from: 'realname', to: 'costDepartment' },
                  { from: 'username', to: 'costDepartmentId' },
                ])
            "
          >
            <a-select-option v-for="d in personList" :key="d.username">
              {{ d.realname }}({{ d.username }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          v-if="flow.needBudget == '1'"
          :required="true"
          label="造价部门主管"
         :label-col="{ span: 9 }" :wrapper-col="{ span: 13 }">
          <a-select
            mode="multiple"
            show-search
            :value="flow.costDepartmentSupervisor?flow.costDepartmentSupervisor.split(','):flow.costDepartmentSupervisor"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="fetchUserList"
            @change="
              (value) =>
                selectUserList(value, 'flow', 1, [
                  { from: 'realname', to: 'costDepartmentSupervisor' },
                  { from: 'username', to: 'costDepartmentSupervisorId' },
                ])
            "
          >
            <a-select-option v-for="d in personList" :key="d.username">
              {{ d.realname }}({{ d.username }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :required="true" label="项目经理A" :label-col="{ span: 9 }" :wrapper-col="{ span: 13 }">
          <a-select
            mode="multiple"
            show-search
            :value="flow.projectManager?flow.projectManager.split(','):flow.projectManager"
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            @search="fetchUserList"
            @change="
              (value) =>
                selectUserList(value, 'flow', 1, [
                  { from: 'realname', to: 'projectManager' },
                  { from: 'username', to: 'projectManagerId' },
                ])
            "
          >
            <a-select-option v-for="d in personList" :key="d.username">
              {{ d.realname }}({{ d.username }})
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <div style="display: flex">
        <div style="min-width: 60px;max-width: 60px;line-height: 35px;">审批流程:</div>
        <div style="display: flex; flex-wrap: wrap; line-height: 35px">
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">申请人</span>-></div>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">专业负责人</span>-></div>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">相关专业负责人及部门主管</span>-></div>
          <div v-if="flow.needBudget == '1'">
            <span style="margin: 5px; padding: 5px; border: 1px solid grey">造价专员</span>->
          </div>
          <div v-if="flow.needBudget == '1'">
            <span style="margin: 5px; padding: 5px; border: 1px solid grey">造价主管</span>->
          </div>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">项目经理A</span>-></div>
          <div v-if="flow.needFactory == '1'">
            <span style="margin: 5px; padding: 5px; border: 1px solid grey">投资方负责人</span>->
          </div>
          <div v-if="flow.needCompanyLeader == '1'">
            <span style="margin: 5px; padding: 5px; border: 1px solid grey">装备工程委</span>->
          </div>
          <div v-if="flow.needChargLeader == '1'">
            <span style="margin: 5px; padding: 5px; border: 1px solid grey">主管领导</span>->
          </div>
          <div v-if="flow.needCeo == '1'"><span style="padding: 5px; border: 1px solid grey">总裁</span>-></div>
          <div><span style="margin: 5px; padding: 5px; border: 1px solid grey">完善并提交</span></div>
        </div>
      </div>
      <div v-if="flow.isUpper == '1'" style="color: red">注意:{{ flow.isUpperTips }}</div>
    </div>
  </a-modal>
</template>
<script>
import { UserMixin } from '@/mixins/UserMixin'
export default {
  mixins: [UserMixin],
  components: {
    UserSelect: () => import('@/components/tools/UserSelect'),
  },
  name: 'ProcessUserSelect',
  data() {
    return {
      visible: false,
      flow: {},
    }
  },
  mounted() {},
  methods: {
    open(flow) {
      this.flow = flow
      this.visible = true
    },
    handleOk() {
      if (!this.flow.disciplineLeader || !this.flow.disciplineLeaderId) {
        return this.$message.warning('请选择专业负责人')
      }
      if (!this.flow.disciplineLeaderSupervisor || !this.flow.disciplineLeaderSupervisorId) {
        return this.$message.warning('请选择相关专业负责人及部门主管')
      }
      if (this.flow.needBudget=='1') {
        if (!this.flow.costDepartment || !this.flow.costDepartmentId) {
          return this.$message.warning('请选择造价专员')
        }
        if (!this.flow.costDepartmentSupervisor || !this.flow.costDepartmentSupervisorId) {
          return this.$message.warning('请选择造价主管')
        }
      }
      if (!this.flow.projectManager || !this.flow.projectManagerId) {
        return this.$message.warning('请选择项目经理A')
      }
      this.visible = false
      this.$emit('selectUserConfirm1', this.flow)
    },
    handleCancel() {
      this.visible = false
      this.$emit('selectUserConfirm1', null)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
/deep/ .ant-form-item-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>